<!-- 多选框 -->
<template>
	<div class="m-checkbox-wp" @click="handleClick()">
		<el-checkbox :modelValue="checked" :value="value" :name="name" />
		<span class="m-checkbox-label">{{label}}</span>
	</div>
</template>
<script setup>
import { onMounted, reactive, ref, computed } from 'vue';

const emits = defineEmits(['update:modelValue', 'change'])
const props = defineProps({
	modelValue: {
		type: Array,
	},
	label: {
		type: String
	},
	value: {
		type: [String, Number, Boolean]
	},
	name: {
		type: String
	}
})

const checked = computed(() => {
	let res = props.modelValue.includes(props.value);
	return res;
})

onMounted(() => {
	
})

const handleClick = () => {
	let res = [...props.modelValue];
	let idx = res.findIndex(item => item == props.value);
	let state = false;
	if(idx == -1) {
		state = true;
		res.push(props.value)
	} else {
		res.splice(idx, 1);
	}
	emits('update:modelValue', res);
	emits('change', props.value, state);
}

</script>
<style lang="scss" scoped>
.m-checkbox-wp {
	display: inline-flex;
	algin-items: center;
	position: relative;
	cursor: pointer;
	&:before {
		content: '';
		position: absolute;
		z-index: 2;
		width: 18px;
		left: 0;
		top: 0;
		bottom: 0;
	}
}
</style>